<template>
  <div class="app-container">
    <nav class="custom-navbar">
      <div class="container">
        <div class="navbar-content">
          <router-link class="navbar-brand" to="/">
            <i class="bi bi-currency-bitcoin brand-icon"></i>
            区块链投资管理系统
          </router-link>
          <button class="navbar-toggler" type="button" @click="toggleNav">
            <i class="bi" :class="isNavOpen ? 'bi-x-lg' : 'bi-list'"></i>
        </button>
          <div class="navbar-links" :class="{ 'active': isNavOpen }">
            <router-link class="nav-link" to="/" @click="closeNav">
              <i class="bi bi-house-door"></i> 首页
            </router-link>
            <router-link class="nav-link" to="/create" @click="closeNav">
              <i class="bi bi-plus-circle"></i> 创建投资
            </router-link>
            <router-link class="nav-link" to="/verification" @click="closeNav">
              <i class="bi bi-shield-check"></i> 数据验证
            </router-link>
            <router-link class="nav-link" to="/events" @click="closeNav">
              <i class="bi bi-activity"></i> 事件监听
            </router-link>
          </div>
        </div>
      </div>
    </nav>

    <!-- 系统状态指示器 -->
    <div class="container">
      <div class="status-panel" :class="connectionStatus.statusClass">
        <div class="status-item">
          <i class="bi" :class="connectionStatus.icon"></i>
          <span class="status-label">系统状态:</span>
          <span class="status-badge" :class="connectionStatus.badgeClass">{{ connectionStatus.text }}</span>
        </div>
        <div class="status-item">
          <i class="bi bi-layers"></i>
          <span class="status-label">区块高度:</span>
          <span class="status-value">
            <span class="block-badge">{{currentBlockNumber}}</span>
          </span>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <main class="main-content">
    <router-view />
    </main>

    <!-- 页脚 -->
    <footer class="app-footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-copyright">
            <p>© 2023-2024 区块链投资管理系统</p>
          </div>
          <div class="footer-links">
            <a href="#" class="footer-link">
              <i class="bi bi-github"></i>
            </a>
            <a href="#" class="footer-link">
              <i class="bi bi-linkedin"></i>
            </a>
            <a href="#" class="footer-link">
              <i class="bi bi-twitter-x"></i>
            </a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      currentBlockNumber: '加载中...',
      isConnected: false,
      connectionError: null,
      isNavOpen: false
    }
  },
  computed: {
    connectionStatus() {
      if (this.connectionError) {
        return {
          text: '连接失败',
          badgeClass: 'status-badge-danger',
          statusClass: 'status-panel-danger',
          icon: 'bi-exclamation-triangle-fill'
        };
      } else if (this.isConnected) {
        return {
          text: '已连接',
          badgeClass: 'status-badge-success',
          statusClass: 'status-panel-success',
          icon: 'bi-check-circle-fill'
        };
      } else {
        return {
          text: '连接中...',
          badgeClass: 'status-badge-warning',
          statusClass: 'status-panel-warning',
          icon: 'bi-hourglass-split'
        };
      }
    }
  },
  methods: {
    async getBlockNumber() {
      try {
        const response = await axios.get('/api/investments', { timeout: 5000 });
        if (response.data && response.data.blockNumber) {
          this.currentBlockNumber = response.data.blockNumber;
          this.isConnected = true;
          this.connectionError = null;
        } else {
          this.currentBlockNumber = '未知';
          this.isConnected = false;
          this.connectionError = '未接收到区块高度数据';
        }
      } catch (error) {
        console.error('获取区块高度失败:', error);
        this.currentBlockNumber = '未连接';
        this.isConnected = false;
        this.connectionError = error.message || '网络错误';
      }
    },
    toggleNav() {
      this.isNavOpen = !this.isNavOpen;
    },
    closeNav() {
      this.isNavOpen = false;
    }
  },
  mounted() {
    // 定期获取区块高度
    this.getBlockNumber();
    setInterval(() => {
      this.getBlockNumber();
    }, 10000); // 每10秒更新一次
  }
}
</script>

<style>
/* 导入基础样式 */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css');
@import './assets/styles.css';

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.custom-navbar {
  background-color: var(--white);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  padding: 0.8rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--dark-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.brand-icon {
  color: var(--accent-color);
  font-size: 1.6rem;
}

.navbar-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-link {
  color: var(--dark-text);
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  font-size: var(--font-size-base);
}

.nav-link:hover {
  color: var(--accent-color);
  background-color: rgba(217, 164, 65, 0.08);
}

.nav-link.router-link-active {
  color: var(--accent-color);
  background-color: rgba(217, 164, 65, 0.12);
  font-weight: 600;
}

.navbar-toggler {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--dark-text);
  cursor: pointer;
}

/* 状态面板 */
.status-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  margin: 1rem 0 2rem;
  background-color: var(--white);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.status-panel-success {
  border-left: 4px solid var(--success-color);
}

.status-panel-warning {
  border-left: 4px solid var(--warning-color);
}

.status-panel-danger {
  border-left: 4px solid var(--danger-color);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
}

.status-label {
  font-weight: 500;
  color: var(--secondary-color);
}

.status-badge {
  padding: 0.4em 0.8em;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.status-badge-success {
  background-color: rgba(92, 173, 86, 0.15);
  color: var(--success-color);
}

.status-badge-warning {
  background-color: rgba(230, 181, 92, 0.15);
  color: var(--warning-color);
}

.status-badge-danger {
  background-color: rgba(224, 122, 122, 0.15);
  color: var(--danger-color);
}

.block-badge {
  background-color: var(--secondary-color);
  color: white;
  padding: 0.4em 0.8em;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-family: monospace;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 1.5rem 1.5rem 2rem;
  background-color: var(--cream-yellow);
  border-radius: 16px;
  margin: 0 1.5rem 2rem;
  border: 4px solid var(--cream-yellow);
  box-shadow: 0 4px 15px var(--shadow-color);
}

/* 页脚 */
.app-footer {
  background-color: var(--white);
  padding: 1.5rem 0;
  margin-top: auto;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright p {
  margin: 0;
  color: var(--secondary-color);
  font-size: var(--font-size-sm);
}

.footer-links {
  display: flex;
  gap: 1rem;
}

.footer-link {
  color: var(--secondary-color);
  font-size: var(--font-size-lg);
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--accent-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar-toggler {
    display: block;
  }
  
  .navbar-links {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background-color: var(--white);
    flex-direction: column;
    padding: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
  }
  
  .navbar-links.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .nav-link {
    width: 100%;
    padding: 0.8rem;
  }
  
  .status-panel {
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}
</style> 